<template>
  <div style="position: relative">
    <div style="position: absolute; left: 47.5%; top: 2%">
      <Decorator1>{{ partName }}</Decorator1>
    </div>
    <div class="deviceBorder">
      <div
        style="position: absolute; left: 0px; top: 0px; height: 412px; width: 350px; padding: 4px"
      >
        <el-popover
          placement="right"
          title="设备状态"
          width="120"
          trigger="hover"
          v-model="visible"
        >
          <div>
            <span>累计运行：</span>
            <div>
              <span>{{ currentValue }} H</span>
            </div>
          </div>
          <div style="margin-top: 4px">
            <span>预警值：</span>
            <div>
              <span>{{ warningValue }} H</span>
            </div>
          </div>
          <div style="margin-top: 4px">
            <span>停机值：</span>
            <div>
              <span>{{ stopValue }} H</span>
            </div>
          </div>
          <template #reference>
            <div style="height: 100%; width: 100%; border-radius: 1em"></div>
          </template>
        </el-popover>
      </div>
      <img src="@/assets/img/mixing-2D.png" height="400" width="336" />
      <el-progress
        :text-inside="true"
        :stroke-width="20"
        :percentage="percentage"
        :status="status"
        duration="50"
        striped="true"
        striped-flow="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Decorator1 from '@/components/decorators/decorator1.vue'
import { useDeviceMaintenanceSignalRClientStore } from '@/stores/device-maintenance/signalr-client'
import { computed, onBeforeUnmount, ref } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(true)

const clientStore = useDeviceMaintenanceSignalRClientStore()

const partName = defineModel('partName', {
  type: String,
  default: ''
})

const partId = defineModel('partId', {
  type: String,
  default: '',
  required: false
})

const currentValue = ref(0)
const warningValue = ref(0)
const stopValue = ref(0)
const status = computed(() => {
  if (currentValue.value >= stopValue.value) {
    return 'exception'
  } else if (currentValue.value >= stopValue.value - warningValue.value) {
    return 'warning'
  } else {
    return 'success'
  }
})
const percentage = computed(() => {
  if (stopValue.value <= 0) {
    return 0
  }
  return Math.floor((currentValue.value / stopValue.value) * 100)
})

clientStore.subscribeAsync(partId.value, (result) => {
  if (result.taskName == '保养运行值') {
    currentValue.value = Number(result.value)
  } else if (result.taskName == '保养预警值') {
    warningValue.value = Number(result.value)
  } else if (result.taskName == '保养停机值') {
    stopValue.value = Number(result.value)
  }
})
onBeforeUnmount(async () => {
  await clientStore.unsubscribeAsync(partId.value)
})
</script>

<style scoped>
.deviceBorder {
  border: solid;
  border-color: lightgreen;
  border-radius: 1em;
  overflow: hidden;
  padding: 4px;
  background-color: white;
}
</style>
